<template>
  <div class="BMICalcComponent">
    <div class="calc">
      <h2>免费计算你的身体质量指数 (BMI)</h2>
      <div>
        <label>我的身高:</label>
        <input type="text" v-model.trim="height">
      </div>
      <div>
        <label>我的体重:</label>
        <input type="text" v-model.trim="weight">
      </div>
      <button @click="calcBMI">计算BMI</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "BMICalcComponent",
  data() {
    return {
      height: '',
      weight: '',
    }
  },
  methods: {
    calcBMI() {
      const numReg = /^[0-9]*$/
      if (this.height && this.weight) {
        if (numReg.test(this.height) && numReg.test(this.weight)) {
          this.$emit('my-data', {
            height: this.height,
            weight: this.weight
          })
          this.height = ''
          this.weight = ''
        } else {
          alert('身高体重必须为数字')
        }
      } else {
        alert('身高体重不能为空')
      }
      // this.$emit(自定义事件名, 数据)
      // console.log(this.height)
      // console.log(this.weight)
    }
  }
}
</script>

<style>
.calc {
  border: 2px solid #2c3e50;
}
</style>
